<template>
    <div class="system-user-dialog-container">
        <el-dialog :close-on-click-modal="false" :title="dataForm.userId ? $t('common.editBtn') : $t('common.addBtn')"
            draggable v-model="visible">
            <el-form :model="dataForm" label-width="120px" ref="dataFormRef" v-loading="loading">
                <el-row :gutter="20">
                    <el-form-item :label="$t('bar.receiptCode')">
                        <el-input v-model="state.queryForm.receiptCode" clearable disabled />
                    </el-form-item>
                    <el-form-item :label="$t('bar.materialcode')">
                        <el-input v-model="state.queryForm.materialCode" clearable disabled />
                    </el-form-item>
                    <el-form-item :label="$t('bar.materialname')">
                        <el-input v-model="state.queryForm.materialName" clearable disabled />
                    </el-form-item>
                    <el-form-item :label="$t('bar.currentqty')">
                        <el-input v-model="state.queryForm.qty" clearable disabled />
                    </el-form-item>
                    <el-form-item :label="$t('bar.reprintBarcodeNumber')">
                        <el-input v-model="state.queryForm.reprintBarcodeNumber"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="plus" style="margin-top: -20px;" @click="getDataList">{{ $t('bar.addNewBarcode') }}</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
            <!-- <el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border
                style="width: 100%; height: 100%" :cell-style="tableStyle.cellStyle" stripe
                :header-cell-style="tableStyle.headerCellStyle" ref="tableRef">
                <el-table-column type="index" label="#" width="80" />
                <el-table-column prop="barcode" :label="$t('bar.barcode')" show-overflow-tooltip />
                <el-table-column prop="materialCode" :label="$t('bar.materialcode')" show-overflow-tooltip />
                <el-table-column prop="materialName" :label="$t('bar.materialname')" show-overflow-tooltip />
                <el-table-column prop="materialSpec" :label="$t('bar.materialspec')" show-overflow-tooltip />
                <el-table-column prop="currentQty" :label="$t('bar.currentqty')" show-overflow-tooltip />
                <el-table-column align="center" :label="$t('bar.currentqty')" prop="selected">
                    <template #default="{ row, $index }">
                        <el-form-item label-width="auto" :prop="`dataList.${$index}.currentqty`">
                            <el-input v-model="row.currentqty" style="width: 100%" type="number" />
                        </el-form-item>
                    </template>
                </el-table-column>
            </el-table> -->
            <el-table :data="state.dataList" highlight-current-row  border
            style="width: 100%; height: 100%" :cell-style="tableStyle.cellStyle" stripe 
            :header-cell-style="tableStyle.headerCellStyle" >
            <el-table-column type="index" label="#" width="80" />
                <el-table-column prop="barcode" :label="$t('bar.barcode')" show-overflow-tooltip />
                <el-table-column prop="materialCode" :label="$t('bar.materialcode')" show-overflow-tooltip />
                <el-table-column prop="materialName" :label="$t('bar.materialname')" show-overflow-tooltip />
                <el-table-column prop="materialSpec" :label="$t('bar.materialspec')" show-overflow-tooltip />
                <el-table-column align="center" :label="$t('bar.currentqty')" prop="text">
                    <template #default="{ row, $index }">
                        <el-form-item label-width="0px" :prop="`dataList.${$index}.currentQty`">
                            <el-input v-model="row.currentQty"  />
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="type" :label="$t('bar.materialspec')" show-overflow-tooltip />
            </el-table>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="visible = false" icon="close">{{ $t('common.cancelButtonText') }}</el-button>
                    <el-button @click="onSubmit" type="primary" icon="check" :disabled="loading">{{
                        $t('common.confirmButtonText')
                    }}</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" name="spDialog" setup>
import { BasicTableProps, useTable } from '/@/hooks/table';
import { useMessage } from '/@/hooks/message';
import { getSpBarcode } from '/@/api/platform/wms/sp';
import { GetBarcodesByReceipt, createBarcodesByReceipt } from '/@/api/platform/wms/reprintbarcode';
import { ref, reactive } from 'vue';

const scFormTable = defineAsyncComponent(() => import('/@/components/FormTable/index.vue'));
// 通知父组件刷新
const emit = defineEmits(['refresh']);
// 定义变量内容
const dataFormRef = ref();
const tableRef = ref();
const visible = ref(false);
const barDialogRef = ref();

const loading = ref(false);
const size = ref<'default' | 'large' | 'small'>('default');
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

const dataForm = reactive({

});
const repaetTypeCode = ref();
// 打开弹窗
const openDialog = async (arr: any,type:any) => {
    visible.value = true;
    // 重置表单数据

    state.queryForm.ReceiptDetailId = arr.id;
    state.queryForm.receiptCode = arr.receiptCode;
    state.queryForm.materialCode = arr.materialCode;
    state.queryForm.materialName = arr.materialName;
    state.queryForm.qty = arr.qty;

    state.queryForm.reprintBarcodeNumber = '1';
    repaetTypeCode.value = type;
    state.dataList = [];
};

//收料单表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {
        isGet: 'Y',
        reprintBarcodeNumber: 1,
        ReceiptDetailId: 0,
        repaetTypeCode:repaetTypeCode
    },
    pageList: GetBarcodesByReceipt,
});
const { tableStyle, getDataList, sizeChangeHandle, currentChangeHandle, downBlobFile } = useTable(state);
// 提交
const onSubmit = async () => {
    const valid = await dataFormRef.value.validate().catch(() => {
    });
    if (!valid) return false;

    try {
        loading.value = true;
        if (state.dataList.length == 0) {
            useMessage().error(t('bar.createBarcodeFirst'));
            return;
        }
        await createBarcodesByReceipt(state.dataList).then((res) => {
            if (!res.ok) {
                useMessage().error(res.data);
                return;
            }
        });
        visible.value = false; // 关闭弹窗
        emit('refresh');
    } catch (error: any) {
        useMessage().error(error.msg);
    } finally {
        loading.value = false;
    }
};
// 暴露变量
defineExpose({
    openDialog,
});
</script>